<template>
  <div class="nsqaPost ct">
    <div class="detail-content">
      <div class="c-l">
        <div class="t-item cp" :class="pageType == TypeEnum.source ? 'acitem':''"
        @click="setType(TypeEnum.source)"
        >个人资料</div>
        <div v-if="userinfo?.roleType == 'POSTGRADUATE'" class="t-item cp" :class="pageType == TypeEnum.ruzhu ? 'acitem':''"
        @click="setType(TypeEnum.ruzhu)"
        >入驻登记</div>
      </div>
      <div class="c-r">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            v-if="pageType == TypeEnum.source && userinfo?.roleType == 'POSTGRADUATE'"
          >
            <el-form-item label="培养单位" prop="trainingUnits">
              <el-select v-model="ruleForm.trainingUnits" placeholder="请选择培养单位">
                <el-option label=" 河南农业大学" value=" 河南农业大学" />
                <!-- <el-option label="Zone two" value="beijing" /> -->
              </el-select>
            </el-form-item>
            <el-form-item label="科技小院" prop="courtyardId">
              <el-select 
                filterable
                v-model="ruleForm.courtyardId" placeholder="请选择所在小院">
                <el-option v-for="item in yards" :value="item.courtyardId" :label="item.courtyardName" />
                <!-- <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" /> -->
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="账号" prop="account">
              <el-input placeholder="请输入账号" v-model="ruleForm.account" />
            </el-form-item> -->
            <el-form-item label="姓名" prop="name">
              <el-input placeholder="请输入您的姓名" v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="性别" prop="gender" >
              <el-select-v2
                v-model="ruleForm.gender"
                placeholder="请选择性别"
                :options="genderos"
              />
            </el-form-item>

            <el-form-item label="出生日期" prop="birthdate">
              <el-date-picker
                v-model="ruleForm.birthdate"
                type="datetime"
                placeholder="请输入您的出生日期"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                style="width: 100%;"
              />
            </el-form-item>

            <el-form-item label="民族" prop="nationality">
              <el-select-v2
                v-model="ruleForm.nationality"
                placeholder="请选择民族"
                :options="mingzu"
              />
            </el-form-item>

            <el-form-item label="政治面貌" prop="politicalStatus">
              <el-select-v2
                v-model="ruleForm.politicalStatus"
                placeholder="请选择政治面貌"
                :options="zz"
              />
            </el-form-item>

            <el-form-item label="籍贯" prop="nativePlace">
              <el-input placeholder="请输入籍贯（出生地）" v-model="ruleForm.nativePlace" />
            </el-form-item>

            <el-form-item label="常用邮箱" prop="email">
              <el-input placeholder="请输入您的邮箱" v-model="ruleForm.email" />
            </el-form-item>

            <el-form-item label="手机" prop="phone">
              <el-input disabled placeholder="请输入您的手机号" v-model="ruleForm.phone" />
            </el-form-item>

            <!-- <el-form-item label="验证码" prop="verifyCode">
              <el-input
                v-model="ruleForm.verifyCode"
                size="large"
                placeholder="请输入验证码"
                class="tab-input"
              >
              <template #append>
                <el-button type="primary">获取验证码</el-button>
              </template>
              </el-input>
            </el-form-item> -->

            <!-- <el-form-item label="设置登录密码" prop="password">
              <el-input placeholder="请输入密码" v-model="ruleForm.password" />
            </el-form-item>

            <el-form-item label="确认登录密码" prop="password1">
              <el-input placeholder="请输入密码" v-model="ruleForm.password1" />
            </el-form-item> -->

            <el-form-item class="item-sb">
              <el-button class="s-btn" type="primary" @click="submitForm(ruleFormRef)">
                保存
              </el-button>
              <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
            </el-form-item>
        </el-form>

        <el-form
            ref="ruleFormRef3"
            :model="ruleForm3"
            :rules="rules3"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            v-if="pageType == TypeEnum.source && userinfo?.roleType == 'FARMER'"
          >
          <!-- 
            <el-form-item label="账号" prop="account">
              <el-input placeholder="请输入账号" v-model="ruleForm3.account" />
            </el-form-item> -->

            <el-form-item label="姓名" prop="name">
              <el-input placeholder="请输入您的姓名" v-model="ruleForm3.name" />
            </el-form-item>

            <el-form-item label="性别" prop="gender" >
              <el-select-v2
                v-model="ruleForm3.gender"
                placeholder="请选择性别"
                :options="genderos"
              />
            </el-form-item>

            <el-form-item label="所在地" prop="area">
              <el-input placeholder="请输入所在地" v-model="ruleForm3.area" />
            </el-form-item>

            <!-- <el-form-item label="出生日期" prop="birthdate">
              <el-date-picker
                v-model="ruleForm2.birthdate"
                type="datetime"
                placeholder="请输入您的出生日期"
                format="YYYY/MM/DD hh:mm:ss"
                value-format="YYYY-MM-DD"
                style="width: 100%;"
              />
            </el-form-item> -->

            <!-- <el-form-item label="民族" prop="nationality">
              <el-select-v2
                v-model="ruleForm2.nationality"
                placeholder="请选择民族"
                :options="mingzu"
              />
            </el-form-item> -->

            <!-- <el-form-item label="政治面貌" prop="politicalStatus">
              <el-select-v2
                v-model="ruleForm2.politicalStatus"
                placeholder="请选择政治面貌"
                :options="zz"
              />
            </el-form-item> -->
<!-- 
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input placeholder="请输入籍贯（出生地）" v-model="ruleForm2.nativePlace" />
            </el-form-item> -->

            <el-form-item label="常用邮箱" prop="email">
              <el-input placeholder="请输入您的邮箱" v-model="ruleForm3.email" />
            </el-form-item>

            <el-form-item label="手机" prop="phone">
              <el-input disabled placeholder="请输入您的手机号" v-model="ruleForm3.phone" />
            </el-form-item>

            <!-- <el-form-item label="验证码" prop="verifyCode">
              <el-input
                v-model="ruleForm3.verifyCode"
                size="large"
                placeholder="请输入验证码"
                class="tab-input"
              >
              <template #append>
                <el-button @click="getcode(true)" class="codeb" :class="!disabled ? 'codebtn': ''" type="primary">{{disabled ? timeText+'s' : '获取验证码'}}</el-button>
              </template>
              </el-input>
            </el-form-item> -->

            <!-- <el-form-item label="设置登录密码" prop="password">
              <el-input placeholder="请输入密码" v-model="ruleForm3.password" />
            </el-form-item>

            <el-form-item label="确认登录密码" prop="password1">
              <el-input placeholder="请输入密码" v-model="ruleForm3.password1" />
            </el-form-item> -->

            <el-form-item class="item-sb">
              <el-button class="s-btn" type="primary" @click="submitForm3(ruleFormRef3)">
                提交
              </el-button>
            </el-form-item>
          </el-form>

        <el-form
            ref="ruleFormRef2"
            :model="ruleForm2"
            :rules="rules2"
            class="demo-ruleForm"
            status-icon
            v-if="pageType == TypeEnum.ruzhu && userinfo?.roleType == 'POSTGRADUATE'"
          >
            <el-form-item required label="入驻小院时间" prop="checkInDate">
              <el-date-picker
                v-model="ruleForm2.checkInDate"
                type="datetime"
                placeholder="请输入入驻小院时间"
                format="YYYY/MM/DD hh:mm:ss"
                value-format="YYYY-MM-DD"
                style="width: 100%;"
              />
            </el-form-item>

            <el-form-item label="所在院校" prop="school">
              <el-input placeholder="请输入所在院校" v-model="ruleForm2.school" />
            </el-form-item>

            <el-form-item label="所学专业" prop="speciality">
              <el-input placeholder="所学专业" v-model="ruleForm2.speciality" />
            </el-form-item>

            <el-form-item label="所在年级" prop="grade">
              <el-input placeholder="请输入所在年级" v-model="ruleForm2.grade" />
            </el-form-item>

            <el-form-item label="学号" prop="studentNumber">
              <el-input placeholder="请输入学号" v-model="ruleForm2.studentNumber" />
            </el-form-item>

            <el-form-item label="导师姓名" prop="supervisor">
              <el-input placeholder="请输入导师姓名" v-model="ruleForm2.supervisor" />
            </el-form-item>

            <el-form-item label="小院通信地址" prop="address">
              <el-input placeholder="请输入小院通信地址" v-model="ruleForm2.address" />
            </el-form-item>

            <el-form-item required label="上传照片" prop="photo">
              <el-upload
              class="avatar-uploader"
              list-type="picture-card"
              :http-request="uploadFilePromise"
              action="#" 
              :limit="1"
              :on-remove="handleRemove"
              :file-list="fileList"
            > 
              <el-icon @click="uploadFilePromise(scope)"><Plus /></el-icon>
            </el-upload>
            </el-form-item>

            <el-form-item class="item-sb">
              <el-button class="s-btn" type="primary" @click="submitForm2(ruleFormRef2)">
                提交
              </el-button>
              <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
            </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, reactive, computed, watch } from 'vue';
  import { pageCourtyard, updatePostgraduate, updateFarmer } from '@/api/home';
	import { useStore } from 'vuex'//导入createStore构造函数
    import { getTxCosCredential, saveQuestion } from '@/api/home'
  import COS from 'cos-js-sdk-v5'
  import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';

	const store = useStore();
	const userinfo = computed(() => store?.state?.userinfo)
  const ruleFormRef = ref(null)
  const ruleFormRef2 = ref(null)
  const ruleFormRef3 = ref(null)

  const stsToken = ref({});
  const fileList = computed(() => {
    if(ruleForm2.value.photo) {
      return [{
        id: '0',
        name: '1',
        url: ruleForm2.value.photo
      }]
    }
    return []
  })

  const handleRemove = () => {
    fileList.value = [];
    ruleForm2.value.photo = '';
  }

  const uploadFilePromise = (file) => {
    if(!file) return
    getTxCosCredential().then(res=> {
      stsToken.value = res.data;
      const cos = new COS({
      getAuthorization: function(option, callback) {
        callback({
          TmpSecretId: stsToken.value.credentials.tmpSecretId,
          TmpSecretKey: stsToken.value.credentials.tmpSecretKey,
          XCosSecurityToken: stsToken.value.credentials.sessionToken,
          ExpiredTime: stsToken.value.expiredTime
        })
      }
      })
		  uploadFile(cos,file.file)
    })
	}

  const uploadFile =  (cos, file)=> {
    cos.putObject(
      {
        Bucket: stsToken.value.bucket,  // 存储桶名称
        Region: stsToken.value.region, // 地区
        Key:`/uploads/zizhi/${new Date().getTime()}${file.name}` , // 图片名称
        Body: file,
        onHashProgress: function (progressData) {
          console.log ('校验中', JSON.stringify (progressData));
        },
        onProgress: function (progressData) {
          console.log ('上传中', JSON.stringify (progressData));
        },
      },
      function (err, data) {
        if (err) {
          // this.error(file)
          return;
        }
        console.log('----data',data)
        if(data?.statusCode==200 && data?.Location) {
          _$.$message({type: 'success',message:'上传成功'})
          ruleForm2.value.photo = `${location.protocol}//${data.Location}`
        } else {
          _$.$message({type: 'success',message:'上传失败，请重新上传'})
        }
      }
    );
	}
  
  console.log('userinfo',userinfo)

  const ruleForm = ref({
    // account: '',
    trainingUnits:'',
    courtyardId:'',
    name: '',
    gender: '',
    birthdate: '',
    nationality: '',
    politicalStatus: '',
    nativePlace: '',
    email: '',
    phone: [],
    // verifyCode: '',
    // password: '',
    // password1: '',
  })

  const ruleForm2 = ref({
    checkInDate: '',
    school:'',
    speciality:'',
    grade: '',
    studentNumber: '',
    address: '',
    photo:'',
    supervisor: '',
    postgraduateId: '',
  })

  const rules2 = reactive({
    checkInDate: [
    { 
        required: true, 
        message: '请输入时间', 
        trigger: 'blur' 
      },
    ],

    photo: [
      { required: true, 
        message: '请上传图片', 
       },
    ],

  })

  const ruleForm3 = ref({
    area: '',
    // account: '',
    name: '',
    gender: '',
    // birthdate: '',
    // nationality: '',
    // politicalStatus: '',
    // nativePlace: '',
    email: '',
    phone: [],
    // verifyCode: '',
    // password: '',
    // password1: '',
  })

  const rules3 = reactive({
    area: [
    { 
        required: true, 
        message: '请输入所在地', 
        trigger: 'blur' 
      },
    ],
    account: [
    { 
        required: true, 
        message: '请输入账号', 
        trigger: 'blur' 
      },
    ],
    name: [
      {
        required: true,
        message: '请输入您的姓名',
        trigger: 'blue',
      },
    ],
    gender: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change',
      },
    ],
    // birthdate: [
    //   {
    //     required: true,
    //     message: '请输入您的出生日期',
    //     trigger: 'change',
    //   },
    // ],
    // nationality: [
    //   {
    //     required: true,
    //     message: '请选择民族',
    //     trigger: 'change',
    //   },
    // ],
    // politicalStatus: [
    //   {
    //     required: true,
    //     message: '请选择政治面貌',
    //     trigger: 'change',
    //   },
    // ],
    // nativePlace: [
    //   {
    //     required: true,
    //     message: '请输入籍贯（出生地）',
    //     trigger: 'blue',
    //   },
    // ],
    email: [
      { required: true, 
        message: '请输入您的邮箱', 
        trigger: 'blur'
       },
    ],
    phone: [
      { required: true, 
        message: '请输入您的手机号', 
        trigger: 'blur'
       },
    ],
    // verifyCode: [
    //   { 
    //     required: true, 
    //     message: '请输入验证码', 
    //     trigger: 'blur'
    //    },
    // ],
    // password: [
    //   { required: true, 
    //     trigger: 'blur',
    //     // validator: validatePass
    //    },
    // ],
    // password1: [
    //   { 
    //     required: true, 
    //     trigger: 'blur',
    //     // validator: validatePass2
    //    },
    // ],
  })

  watch(userinfo, () => {
    ruleForm.value = userinfo.value;
    ruleForm2.value = userinfo.value;
    ruleForm3.value = userinfo.value;
  }, {immediate: true})

  const TypeEnum = {
    source: 'source',
    ruzhu: 'ruzhu'
  }
  const pageType = ref(TypeEnum.source);
  const setType = (type) => {
    pageType.value = type;
  }

  const mingzu = ref([
    {
        "label": "汉族",
        "value": "汉族"
    },
    {
        "label": "壮族",
        "value": "壮族"
    },
    {
        "label": "满族",
        "value": "满族"
    },
    {
        "label": "回族",
        "value": "回族"
    },
    {
        "label": "苗族",
        "value": "苗族"
    },
    {
        "label": "维吾尔族",
        "value": "维吾尔族"
    },
    {
        "label": "土家族",
        "value": "土家族"
    },
    {
        "label": "彝族",
        "value": "彝族"
    },
    {
        "label": "蒙古族",
        "value": "蒙古族"
    },
    {
        "label": "藏族",
        "value": "藏族"
    },
    {
        "label": "布依族",
        "value": "布依族"
    },
    {
        "label": "侗族",
        "value": "侗族"
    },
    {
        "label": "瑶族",
        "value": "瑶族"
    },
    {
        "label": "朝鲜族",
        "value": "朝鲜族"
    },
    {
        "label": "白族",
        "value": "白族"
    },
    {
        "label": "哈尼族",
        "value": "哈尼族"
    },
    {
        "label": "哈萨克族",
        "value": "哈萨克族"
    },
    {
        "label": "黎族",
        "value": "黎族"
    },
    {
        "label": "傣族",
        "value": "傣族"
    },
    {
        "label": "畲族",
        "value": "畲族"
    },
    {
        "label": "傈僳族",
        "value": "傈僳族"
    },
    {
        "label": "仡佬族",
        "value": "仡佬族"
    },
    {
        "label": "东乡族",
        "value": "东乡族"
    },
    {
        "label": "高山族",
        "value": "高山族"
    },
    {
        "label": "拉祜族",
        "value": "拉祜族"
    },
    {
        "label": "水族",
        "value": "水族"
    },
    {
        "label": "佤族",
        "value": "佤族"
    },
    {
        "label": "纳西族",
        "value": "纳西族"
    },
    {
        "label": "羌族",
        "value": "羌族"
    },
    {
        "label": "土族",
        "value": "土族"
    },
    {
        "label": "仫佬族",
        "value": "仫佬族"
    },
    {
        "label": "锡伯族",
        "value": "锡伯族"
    },
    {
        "label": "柯尔克孜族",
        "value": "柯尔克孜族"
    },
    {
        "label": "达斡尔族",
        "value": "达斡尔族"
    },
    {
        "label": "景颇族",
        "value": "景颇族"
    },
    {
        "label": "毛南族",
        "value": "毛南族"
    },
    {
        "label": "撒拉族",
        "value": "撒拉族"
    },
    {
        "label": "布朗族",
        "value": "布朗族"
    },
    {
        "label": "塔吉克族",
        "value": "塔吉克族"
    },
    {
        "label": "阿昌族",
        "value": "阿昌族"
    },
    {
        "label": "普米族",
        "value": "普米族"
    },
    {
        "label": "鄂温克族",
        "value": "鄂温克族"
    },
    {
        "label": "怒族",
        "value": "怒族"
    },
    {
        "label": "京族",
        "value": "京族"
    },
    {
        "label": "基诺族",
        "value": "基诺族"
    },
    {
        "label": "德昂族",
        "value": "德昂族"
    },
    {
        "label": "保安族",
        "value": "保安族"
    },
    {
        "label": "俄罗斯族",
        "value": "俄罗斯族"
    },
    {
        "label": "裕固族",
        "value": "裕固族"
    },
    {
        "label": "乌兹别克族",
        "value": "乌兹别克族"
    },
    {
        "label": "门巴族",
        "value": "门巴族"
    },
    {
        "label": "鄂伦春族",
        "value": "鄂伦春族"
    },
    {
        "label": "独龙族",
        "value": "独龙族"
    },
    {
        "label": "塔塔尔族",
        "value": "塔塔尔族"
    },
    {
        "label": "赫哲族",
        "value": "赫哲族"
    },
    {
        "label": "珞巴族",
        "value": "珞巴族"
    }
  ])

  const zz = ref([
    {
        "label": "中共党员‌",
        "value": "中共党员‌"
    },
    {
        "label": "‌中共预备党员",
        "value": "‌中共预备党员"
    },
    {
        "label": "共青团员",
        "value": "共青团员"
    },
    {
        "label": "‌民主党派成员",
        "value": "‌民主党派成员"
    },
    {
        "label": "无党派人士",
        "value": "无党派人士"
    },
    {
        "label": "群众",
        "value": "群众"
    }
  ])

  const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
  }

  const validatePass2 = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请确认登录密码'))
    } else if (value !== ruleForm.password) {
      callback(new Error("密码不一致"))
    } else {
      callback()
    }
  }

  const genderos = ref([
    { value: 0, label: '女' },
    { value: 1, label: '男' },
  ])

  const yards = ref([]);
  const getPageCourtyard =  async(courtyardType) => {
    const params = {
      params: {
        status: true,
        // courtyardType: '',
      },
      page: {
        pageSize: 10000,
        pageNum: 0,
      }
    }
    const ret = await pageCourtyard(params)
    yards.value = ret?.data?.list || [];
  }
  getPageCourtyard('');

  const rules = reactive({
    // account: [
    // { 
    //     required: true, 
    //     message: '请输入账号', 
    //     trigger: 'blur' 
    //   },
    // ],
    trainingUnits: [
      { 
        required: true, 
        message: '请选择培养单位', 
        trigger: 'blur' 
      },
    ],
    courtyardId: [
      {
        required: true,
        message: '请选择所属小院',
        trigger: 'change',
      },
    ],
    name: [
      {
        required: true,
        message: '请输入您的姓名',
        trigger: 'blue',
      },
    ],
    gender: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change',
      },
    ],
    birthdate: [
      {
        required: true,
        message: '请输入您的出生日期',
        trigger: 'change',
      },
    ],
    nationality: [
      {
        required: true,
        message: '请选择民族',
        trigger: 'change',
      },
    ],
    politicalStatus: [
      {
        required: true,
        message: '请选择政治面貌',
        trigger: 'change',
      },
    ],
    nativePlace: [
      {
        required: true,
        message: '请输入籍贯（出生地）',
        trigger: 'blue',
      },
    ],
    email: [
      { required: true, 
        message: '请输入您的邮箱', 
        trigger: 'blur'
       },
    ],
    phone: [
      { required: true, 
        message: '请输入您的手机号', 
        trigger: 'blur'
       },
    ],
    // verifyCode: [
    //   { 
    //     required: true, 
    //     message: '请输入验证码', 
    //     trigger: 'blur'
    //    },
    // ],
    // password: [
    //   { required: true, 
    //     trigger: 'blur',
    //     validator: validatePass
    //    },
    // ],
    // password1: [
    //   { 
    //     required: true, 
    //     trigger: 'blur',
    //     validator: validatePass2
    //    },
    // ],
  })

  const submitForm = (formEl) => {
    console.log('000formEl', formEl)
    if (!formEl) return
    formEl.validate(async(valid, fields) => {
      console.log('valid!',valid,fields)
      if (valid) {
        const params = {
            ...ruleForm.value,
            // password: encrypt(ruleForm.password),
            postgraduateId: userinfo.value?.uid
          }
        delete params.password1;
        const ret = await updatePostgraduate({
          params
        })
        console.log('rettt', ret, store)
        if(ret?.code == '200') {
          // ret.data = "1870442383006044162"
          _$.$message({type: 'success',message:  '修改成功'})
        } 
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  const submitForm2 = async (formEl) => {
    console.log('submit!', userinfo.value)
    if (!formEl) return
    await formEl.validate(async(valid, fields) => {
      if (valid) {
        console.log('submit!', userinfo.value)
        const params = {
            ...ruleForm2.value,
            postgraduateId: userinfo.value?.uid
          }
        const ret = await updatePostgraduate({
          params
        })
        console.log('rettt', ret)
        if(ret?.code == '200') {
          _$.$message({type: 'success',message:  '修改成功'})
          // setTimeout(() => {
          //   window.location.href = '/'
          // }, 300);
        } 
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  const submitForm3 = async (formEl) => {
    console.log('submit!', userinfo.value)
    if (!formEl) return
    await formEl.validate(async(valid, fields) => {
      if (valid) {
        console.log('submit!', userinfo.value)
        const params = {
            ...ruleForm2.value,
            farmerId: userinfo.value?.uid
          }
        const ret = await updateFarmer({
          params
        })
        console.log('rettt', ret)
        if(ret?.code == '200') {
          _$.$message({type: 'success',message:  '修改成功'})
          // setTimeout(() => {
          //   window.location.href = '/'
          // }, 300);
        } 
      } else {
        console.log('error submit!', fields)
      }
    })
  }

</script>
<style lang="scss" scoped>
.nsqaPost {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #777;
  padding: 0 10%;
  background: #f8f8f8 url('../../assets/job/6.png') no-repeat 0 200px;
  .detail-content {
    display: flex;
    margin-bottom: 60px;
    min-height: 1000px;
    background-color: #fff;
    margin-top: 60px;
    border-radius: 40px;
    color: #666;
    .c-l {
      box-sizing: border-box;
      flex: 4;
      padding-right: 40px;
      padding-top: 80px;
      border-right: 1px solid #e3e3e3;

      .t-item {
        height: 60px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 20px;
        justify-content: center;
        border-radius: 0 30px 30px 0;
        &.acitem {
          background-color: #0cb462;
          color: #fff;
        }
      }
    }
    .c-r {
      flex: 18;
      box-sizing: border-box;
      padding-top: 80px;
      display: flex;

      .demo-ruleForm {
        margin: 0 auto;
        padding-top: 60px;
        width: 80%;
        :deep(.el-form-item) {
          margin-bottom: 40px;
          .el-form-item__label {
            margin-right: 30px;
            color: #333;
            width: 200px;
          }
          .el-form-item__content {
            .el-input {
              height: 60px;
              .el-input__wrapper {
                background-color: #eef8f3;
              }
            }
            .el-select {
              .el-select__wrapper {
                background-color: #eef8f3;
                height: 60px;
              }
            }
          }
          .el-input-group__append {
            button.el-button {
              background-color: #0a9c55;
              color: #fff;
              height: 100%;
            }
          }
          &.item-sb {
            .el-form-item__content {
              justify-content: flex-end;
            }
            .s-btn {
              height: 70px;
              color: #fff;
              width: 75%;
           }
          }
        
        }
      }

    }
  }

  :deep(.demo-ruleForm) {
    input, textarea {
      font-size: 20px;
    }
    .el-form-item__label {
      font-size: 18px;
    }
    .el-form-item__error {
      font-size: 20px;
    }
    .avatar-uploader {
      
    .el-upload, .el-upload-list {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
      width: 178px;
      height: 178px;
      margin: 0;
      .el-upload-list__item {
        width: 178px !important;
        height: 178px !important;
        margin: 0;
      }
    .el-upload-list__item-thumbnail {
        object-fit: cover !important;
      }
    }
    .el-upload-list__item-preview {
      display: none;
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    }
  }

}
</style>
